<template>
  <div class="xd-LearningHome-PoliticalNews-NewsHome p_10">
    <el-card class="m_t_b_5px news_panel" shadow="hover">
      <div slot="header">
        <!-- <div class="title">科普文章</div> -->
        <el-tabs
          v-model="activeName"
          class="el-tabs-first-indent"
          @tab-click="doSwitchList"
        >
          <el-tab-pane label="浏览记录" name="tabXlyp"> </el-tab-pane>
          <el-tab-pane label="我的提问" name="tabKpwz"> </el-tab-pane>
          <el-tab-pane label="我的回答" name="tabJyyy"> </el-tab-pane>
          <el-tab-pane label="我的私信" name="tabWdsx"> </el-tab-pane>
          <el-tab-pane label="我的预约" name="tabWdyy"> </el-tab-pane>
        </el-tabs>
      </div>
      <el-card
        class="box-card m_t_b_5px"
        v-if="this.form.scienceType == 1 || this.form.scienceType == 2"
      >
        <el-form ref="form" :model="formPolicy" label-width="80px">
          <el-form-item label="类别">
            <el-radio-group
              v-model="formPolicy.themeType"
              size="small"
              @change="handleRadioClick"
            >
              <el-radio-button
                :label="item.dictValue"
                v-for="item in themeTypeList"
                :key="item.dictValue"
                >{{ item.dictLabel }}</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div style="font-size: 14px">
          <el-input
            v-model="form.scienceTitle"
            clearable
            placeholder="搜索标题"
            style="width: 700px; margin: 20px 10px; float: right"
            size="small"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="doSearch"
            ></el-button
          ></el-input>
        </div>
      </el-card>
      <ul class="news_list item_flex_ul" v-if="this.form.scienceType == 1">
        <li
          v-for="p in newsList"
          :key="p.questionId"
          @click="goNewsDetail(p.questionId)"
        >
          <!-- <span class="title">
            <span style="color:red;" v-if="p.i_is_top">【顶】</span>
            · {{ decodeURI(p.v_seach_v_notice_title)}}
          </span>
          <span class="time">{{p.dtm_publish_date}}</span>
           -->
          <el-row style="width: 100%">
            <el-col :span="24" style="font-size: 12px">
              <div>
                <span
                  style="font-weight: bold; font-size: 18px; margin-right: 12px"
                  >{{ p.questionTitle }}</span
                >
              </div>
              <div style="margin-top: 12px">
                <span style="font-size: 14px; color: #a5a0a0">{{
                  formartContent(p.questionContent)
                }}</span>
              </div>
              <div style="font-size: 14px; float: right">
                {{ p.createTime }}
              </div>
            </el-col>
          </el-row>
        </li>
        <p v-if="!newsList.length" class="no-data">{{ NO_DATA }}</p>
      </ul>

      <ul class="news_list item_flex_ul" v-if="this.form.scienceType == 2">
        <li
          v-for="p in examList"
          :key="p.questionId"
          @click="goNewsDetail(p.questionId)"
        >
          <!-- <span class="title">
            <span style="color:red;" v-if="p.i_is_top">【顶】</span>
            · {{ decodeURI(p.v_seach_v_notice_title)}}
          </span>
          <span class="time">{{p.dtm_publish_date}}</span>
           -->
          <el-row style="width: 100%">
            <el-col :span="24" style="font-size: 12px">
              <div>
                <span
                  style="font-weight: bold; font-size: 18px; margin-right: 12px"
                  >{{ p.questionTitle }}</span
                >
              </div>
              <div style="margin-top: 12px">
                <span style="font-size: 14px; color: #a5a0a0">{{
                  formartContent(p.answerContent)
                }}</span>
              </div>
              <div style="font-size: 14px; float: right">
                {{ p.createTime }}
              </div>
            </el-col>
          </el-row>
        </li>
        <p v-if="!newsList.length" class="no-data">{{ NO_DATA }}</p>
      </ul>

      <ul class="news_list item_flex_ul" v-if="this.form.scienceType == 3">
        <li
          v-for="p in studyRecordList"
          :key="p.scienceId"
          @click="goNewsDetail2(p.scienceId)"
        >
          <!-- <span class="title">
            <span style="color:red;" v-if="p.i_is_top">【顶】</span>
            · {{ decodeURI(p.v_seach_v_notice_title)}}
          </span>
          <span class="time">{{p.dtm_publish_date}}</span>
           -->
          <el-row style="width: 100%">
            <el-col :span="24" style="font-size: 12px">
              <div>
                <span
                  style="font-weight: bold; font-size: 18px; margin-right: 12px"
                  >{{ p.scienceTitle }}</span
                >
              </div>
              <div style="margin-top: 12px">
                <span style="font-size: 14px; color: #a5a0a0">{{
                  formartContent150(p.scienceContent)
                }}</span>
              </div>
              <div style="font-size: 14px; float: right">
                {{ p.lastTime ? p.lastTime : p.firstTime }}
              </div>
            </el-col>
          </el-row>
        </li>
        <p v-if="!studyRecordList.length" class="no-data">{{ NO_DATA }}</p>
      </ul>
 
      <ul class="news_list item_flex_ul" v-if="this.form.scienceType == 4">
        <li v-for="p in privateLetterList" :key="p.scienceId">
          <!-- <span class="title">
            <span style="color:red;" v-if="p.i_is_top">【顶】</span>
            · {{ decodeURI(p.v_seach_v_notice_title)}}
          </span>
          <span class="time">{{p.dtm_publish_date}}</span>
           -->
          <el-row style="width: 100%">
            <el-col :span="24" style="font-size: 12px">
              <div>
                <span style="font-size: 16px; margin-right: 12px">{{
                  p.letterContent
                }}</span>
              </div>
              <div style="margin-top: 12px">
                <span style="font-size: 14px; color: #a5a0a0"></span>
              </div>
              <div style="font-size: 14px; float: right">
                {{ p.createTime }} 发送给：<a
                  style="color: #cb2c21"
                  @click="goCounselorDetail(p.counselorId)"
                  >{{ p.counselorName }}
                </a>
              </div>
            </el-col>
          </el-row>
        </li>
        <p v-if="!privateLetterList.length" class="no-data">{{ NO_DATA }}</p>
      </ul>

      <div class="content-body" v-if="this.form.scienceType == 5">
         <el-card
        class="box-card m_t_b_5px"
        v-if="this.form.scienceType == 5"
      >
          <el-radio-group
              v-model="appointParam"
              size="small"
              @change="appointParamClick"
            >
              <el-radio-button label="-1">全部</el-radio-button>
              <el-radio-button label="0">待审核</el-radio-button>
              <el-radio-button label="1">通过</el-radio-button>
              <el-radio-button label="2">驳回</el-radio-button>
            </el-radio-group>
  </el-card>
        <el-table :data="appointList" style="width: 100%" stripe border>
          <el-table-column
            prop="pname"
            label="预约咨询师姓名"
            align="center"
          ></el-table-column>
          <el-table-column label="预约班次" align="center">
            <template slot-scope="scope">
                {{
                !scope.row.classesTime
                  ? ""
                  : scope.row.classesTime.length > 10
                  ? scope.row.classesTime.substr(0, 10)
                  : scope.row.classesTime
              }}
              <template v-if="scope.row.classesFlag == 1"> 上午 </template>
              <template v-if="scope.row.classesFlag == 2"> 下午 </template>
            </template>
          </el-table-column>

          <el-table-column
            prop="createTime"
            label="预约时间"
            align="center"
          ></el-table-column>

           <el-table-column label="预约状态" align="center">
           <template slot-scope="scope">
                    <template v-if="scope.row.status == 0"> 待审核 </template>
                    <template v-if="scope.row.status == 1"> 通过 </template>
                    <template v-if="scope.row.status == 2"> 驳回 </template>
            </template>
           </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="sizeChange2"
        @current-change="pageChange2"
        :current-page="form.pageNumber"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="form.pageSize"
        :layout="PAGE_LAYOUT"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "NoticeHome",
  data() {
    return {
      activeName: "tabXlyp",
      form: {
        pageNumber: 1,
        pageSize: 10,
        scienceTitle: "",
        scienceType: 3,
      },
      examForm: {
        page: 1,
        size: 10,
        total: 1,
      },
      curriculumForm: {
        page: 1,
        size: 10,
        total: 1,
      },
      total: 0,
      newsList: [], //我的提问
      examMap: {},
      examList: [], // 我的回答
      studyRecordList: [], //我的浏览
      privateLetterList: [], //我的私信
      appointList: [], //我的预约
      appointParam:'-1',//
      formPolicy: { themeType: "" },
      curriculumDateRange: null,
      currentPointType: "",
      themeTypeList: [
        {
                  dictValue: "",
                  dictLabel: "全部类别",
                },
                // {
                //   dictValue: "1",
                //   dictLabel: "原生家庭",
                // },
                // {
                //   dictValue: "2",
                //   dictLabel: "抑郁",
                // },
                // {
                //   dictValue: "3",
                //   dictLabel: "自卑",
                // },
                // {
                //   dictValue: "4",
                //   dictLabel: "分手",
                // },
                // {
                //   dictValue: "5",
                //   dictLabel: "失眠",
                // },
                // {
                //   dictValue: "6",
                //   dictLabel: "焦虑",
                // },
      ],
    };
  },
  mounted() {
    //this.getNews();
    this.getThemeList();
    this.doSwitchList({name:this.activeName})
  },
  created() {
    this.$store.commit("updateActiveMenu", "/Cinziqao/PersonalCenter");
    if (this.$route.query.tabName) {
      this.activeName = this.$route.query.tabName;
    }
    this.myPsychicQuestion();
    //this.myAnswerList();
    // this.myStudyRecordList();
  },
  methods: {
     getThemeList() {
      utils.post('psychic/psychicQuestion/psychicQuestionTypeList', {}, res => {
        if (res.success) {
          this.themeTypeList = this.themeTypeList.concat(res.data.rows)
        }
      })
    },
    doSwitchList(key) {
      var that = this;
      this.formPolicy.themeType = "";
      switch (key.name) {
        case "tabKpwz":
          this.form.scienceType = 1;
          this.myPsychicQuestion();
          break;
        case "tabJyyy":
          this.form.scienceType = 2;
          this.myAnswerList();
          break;
        case "tabXlyp":
          this.form.scienceType = 3;
          this.myStudyRecordList();
          break;
        case "tabWdsx": //我的私信
          this.form.scienceType = 4;
          this.myPrivateLetterList();
          break;
        case "tabWdyy": //我的预约
          this.form.scienceType = 5;
          this.myAppointList();
          break;
        default:
          break;
      }
    },
    sizeChange2(val) {
      this.form.pageSize = val;
      if (this.form.scienceType == 1) {
        this.myPsychicQuestion();
      } else if (this.form.scienceType == 2) {
        this.myAnswerList();
      } else if (this.form.scienceType == 3) {
        this.myStudyRecordList();
      } else if (this.form.scienceType == 4) {
        this.myPrivateLetterList();
      } else if (this.form.scienceType == 5) {
        this.myAppointList();
      }
    },
    pageChange2(val) {
      this.form.pageNumber = val;
      if (this.form.scienceType == 1) {
        this.myPsychicQuestion();
      } else if (this.form.scienceType == 2) {
        this.myAnswerList();
      } else if (this.form.scienceType == 3) {
        this.myStudyRecordList();
      } else if (this.form.scienceType == 4) {
        this.myPrivateLetterList();
      } else if (this.form.scienceType == 5) {
        this.myAppointList();
      }
    },
    goNewsDetail(id) {
      this.$router.push({
        path: "/Cinziqao/Faq/Detail?",
        query: { id: id, activeMenu: "/Cinziqao/PersonalCenter" },
      });
    },
    goNewsDetail2(id) {
      this.$router.push({
        path: "/Cinziqao/Detail",
        query: { id: id, activeMenu: "/Cinziqao/PersonalCenter" },
      });
    },
    goCounselorDetail(id) {
      this.$router.push({
        path: "/Cinziqao/Consult/Detail",
        query: { id: id, activeMenu: "/Cinziqao/PersonalCenter" },
      });
    },
    formartContent(value) {
      var content = value.replace(/<[^>]+>/g, "");
      return content.substring(0, 178) + (content.length > 178 ? "..." : "");
    },
    formartContent150(value) {
      if (value) {
        var content = value.replace(/<[^>]+>/g, "");
        return content.substring(0, 150) + (content.length > 150 ? "..." : "");
      } else {
        return "";
      }
    },
    handleRadioClick() {
      this.form.questionType = this.formPolicy.themeType;
      if (this.form.scienceType == 1) {
        this.myPsychicQuestion();
      } else if (this.form.scienceType == 2) {
        this.myAnswerList();
      }
    },
    appointParamClick() { 
      this.myAppointList();
    },
    doSearch() {
      this.form.questionType = this.formPolicy.themeType;
      if (this.form.scienceType == 1) {
        this.myPsychicQuestion();
      } else if (this.form.scienceType == 2) {
        this.myAnswerList();
      }
    },
    myAnswerList() {
      //我的回答
      var that = this;
      this.examList = [];
      utils.post(
        "/psychic/psychicQuestion/myAnswerList",
        {
          // startTime: this.examDateRange ? this.examDateRange[0] : "",
          // endTime: this.examDateRange ? this.examDateRange[1] : "",
          pageNumber: this.form.pageNumber,
          pageSize: this.form.pageSize,
        },
        (res) => {
          if (res.success) {
            that.examList = res.data.rows;
            that.examForm.total = res.data.total;
            that.total = res.data.total;
          }
        }
      );
    },
    myPsychicQuestion() {
      //我的提问
      var that = this;
      that.newsList = [];
      utils.post(
        "/psychic/psychicQuestion/myList",
        {
          questionTitle: that.form.scienceTitle,
          questionType: that.formPolicy.themeType,
          startTime: this.curriculumDateRange
            ? this.curriculumDateRange[0]
            : "",
          endTime: this.curriculumDateRange ? this.curriculumDateRange[1] : "",
          pageNumber: this.form.pageNumber,
          pageSize: this.form.pageSize,
        },
        (res) => {
          if (res.success) {
            that.newsList = res.data.rows.map((item) => {
              const value = that.themeTypeList.find((element) => {
                return element.dictValue === item.questionType;
              });
              item.questionTypeText = value ? value.dictLabel : "";
              return item;
            });
            that.curriculumForm.total = res.data.total;
            that.total = res.data.total;
          }
        }
      );
    },
    myStudyRecordList() {
      //我的浏览记录
      var that = this;
      that.studyRecordList = [];
      utils.post(
        "/psychic/psychicScience/myStudyRecordList",
        {
          firstTime: this.curriculumDateRange
            ? this.curriculumDateRange[0]
            : "",
          lastTime: this.curriculumDateRange ? this.curriculumDateRange[1] : "",
          pageNumber: this.form.pageNumber,
          pageSize: this.form.pageSize,
        },
        (res) => {
          if (res.success) {
            that.studyRecordList = res.data.rows;
            // that.curriculumForm.total = res.data.total;
            that.total = res.data.total;
          }
        }
      );
    },
    myPrivateLetterList() {
      var that = this;
      that.privateLetterList = [];
      utils.post(
        "/psychic/psychicCounselor/myPrivateLetterList",
        { pageNumber: this.form.pageNumber, pageSize: this.form.pageSize },
        (res) => {
          if (res.success) {
            that.privateLetterList = res.data.rows;
            that.total = res.data.total;
          }
        }
      );
      // debugger
      // var that = this;
      // that.privateLetterList = [];
      // utils.post(
      //   "/psychic/psychicCounselor/myPrivateLetterList",
      //   {
      //     firstTime: this.curriculumDateRange
      //       ? this.curriculumDateRange[0]
      //       : "",
      //     lastTime: this.curriculumDateRange ? this.curriculumDateRange[1] : "",
      //     pageNumber: this.form.pageNumber,
      //     pageSize: this.form.pageSize,
      //   },
      //   (res) => {
      //     if (res.success) {
      //       that.privateLetterList = res.data.rows
      //      // that.curriculumForm.total = res.data.total;
      //       that.total = res.data.total;
      //     }
      //   }
      // );
    },
    myAppointList() {
      var that = this;
      that.privateLetterList = [];  
      var param = { pageNumber: this.form.pageNumber, pageSize: this.form.pageSize};
      if(that.appointParam!=-1){
        param.status = that.appointParam;
      }
      utils.post(
        "/psychic/psychicCounselor/myAppointList",
       param,
        (res) => {
          if (res.success) {
            that.appointList = res.data.rows;
            that.total = res.data.total;
          }
        }
      );
    },
  },
};
</script>
<style lang="less">
.xd-LearningHome-PoliticalNews-NewsHome {
  .news_panel {
    ul.news_list li {
      border-bottom: solid 1px #dcdfe6;
      padding-bottom: 5px;
    }
  }
}
</style>
